<template>
	<view class="myOrderBox justify-between flex-wrap">
		
            <view class="artItem   radius6  " v-for="(i,n) in list" :key="n" @click="tomain(i)">
               
				<image :src="i.image" style="border-radius: 12rpx 12rpx 0 0 ;" mode="aspectFill"></image>
                <view class="flex-col justify-between  flex1" style="margin: 20rpx;">
                    <text class="name clamp1">{{i.title}}</text>
					<view class="ft12" style="color: #999;"  v-if="i.show_status==1">
					付款周期：{{i.zhouqi}}月
					</view>
					<view class="justify-between align-end " v-if="i.show_status==1">
						<view class="">
							￥<text>{{i.show_price}}</text>期
						</view>
						<image src="/static/images/cart.png" style="width: 44rpx;" mode="widthFix"></image>
					</view>
                </view>
               
            </view>
		
        <view class="" v-if="list.length==0">
            <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
        </view>
	
	</view>
</template>

<script>
	import operate from  '@/common/operate.js'
	export default {
		data() {
			return {
				id:"",
				page:1,
				list:[],
				total:0

			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.page=1
			this.list = []
			this.getlist()
		},
		onReachBottom() {
			if(this.list.length<this.total){
				this.page++
				this.getlist()
			}
		},
		methods: {
			getlist(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.goodsTwocate({page:this.page,id:this.id}).then(res=>{
					console.log(res)	
					if(res.code==1){
		
						this.total = res.data.total
						this.list = [...this.list,...res.data.rows]
					}
					
				})
			},
			tomain(item){
				uni.navigateTo({
					url:'/pages/goodsMain/index?id='+item.id
				})
			}
            
		}
	}
</script>

<style lang="scss" scoped>
	.myOrderBox{
		padding:  22rpx;
	}
    .artItem {
        
		background-color: #fff;
        font-size: 24rpx;
        color: #9F9F9F;
        margin-bottom: 20rpx;
		padding-bottom: 18rpx;
		width: 343rpx;
        image{
          width: 343rpx;
		  height: 320rpx;
        }
        .right{
            width: 120rpx;
            height: 54rpx;
            background: rgba(0,199,119,0.2);
            border-radius: 60rpx ;
            font-size: 28rpx;
            color: #2CC6A1;
            text-align: center;
            line-height: 54rpx;
        }
        .name{
            font-size: 32rpx;
            color: #3D3D3D;
        }
    }
</style>